<template>
    <div class="box4" ref="map">地图</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './china.json'

// 获取DOM节点
let map = ref<any>()

// 注册中国地图
echarts.registerMap('china', chinaJSON as any)

onMounted(() => {
    let mychart = echarts.init(map.value)
    mychart.setOption({
        geo: {
            map: 'china',
            roam: true, //鼠标缩放效果
            left: 50,
            top: 100,
            right: 50,
            bottom: 0,
            // zoom:2,
            label: {
                show: true,
                rotate: 20,
                color: '#fff',
                fontSize: 14
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#023481'
                    }, {
                        offset: 1, color: '#032045'
                    }],
                    global: false
                },
                opacity: .8
            },
            emphasis: {
                itemStyle: {
                    color: 'blue'
                },
                label: {
                    fontSize: 40
                }
            }
        },
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
        },
        series: [
            {
                type: 'lines',//航线系列
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989],
                            [121.472644, 31.231706]
                        ],
                        lineStyle: {
                            color: 'orange',
                            width: 5
                        },

                    },
                    {
                        coords: [
                            [116.405285, 39.904989],
                            [91.132212, 29.660361]
                        ],
                        lineStyle: {
                            color: 'orange',
                            width: 5
                        },

                    },
                ],
                // 开启动画特效
                effect: {
                    show: true,
                    symbol: 'arrow',
                    color:'blue',
                    symbolSize:10
                }
            }
        ]
    })
})
</script>

<style lang="scss" scoped>
.box4 {}
</style>